<template>
	<view class="information">
		<view class="navbar-box">
			<view class="navbar-item" :class="{'active': active == 0}" @click="navbarChange(0)">
				<view class="navbar-name">电子资料（2）</view>
				<view class="navbar-desc">(手机拍摄上传)</view>
			</view>
			<view class="navbar-item" :class="{'active': active == 1}" @click="navbarChange(1)">
				<view class="navbar-name">邮寄资料（10）</view>
				<view class="navbar-desc">(需提供原件资料)</view>
			</view>
		</view>
		<view class="information-list">
			<view class="information-item">
				<image class="information-icon" src="@/static/images/goods/huzhao.png" mode="aspectFill"></image>
				<view class="information-name">护照首页<text class="required">*</text></view>
			</view>
			<view class="information-item">
				<image class="information-icon" src="@/static/images/goods/zhaopian.png" mode="aspectFill"></image>
				<view class="information-name">本人照片<text class="required">*</text></view>
			</view>
			<view class="information-item">
				<image class="information-icon" src="@/static/images/goods/zhengjian.png" mode="aspectFill"></image>
				<view class="information-name">退休证<text class="required">*</text></view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	const props = defineProps({
		type: {
			type: Number,
			default: 0
		}
	});
	let active = ref(0);
	let list = ref([
		[]
	]);

	function navbarChange(index) {
		active.value = index;
	}
</script>

<style scoped lang="scss">
	.information {
		margin-bottom: 20rpx;
		
		.navbar-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.navbar-item {
				width: 50%;
				text-align: center;
				padding-bottom: 10rpx;
				position: relative;

				.navbar-desc {
					color: #999999;
				}

				&.active::before {
					content: "";
					width: 60rpx;
					height: 4rpx;
					background-color: #e04b4b;
					border-radius: 2rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		
		.information-list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		
			
			.information-item{
				width: calc(100% / 3);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				
				.information-icon{
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
				.information-name{
					font-size: 26rpx;
					
					.required{
						color: #ff0000;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>